<template>
  <!-- <v-menu activator="parent"> -->
  <v-list :nav="true" density="compact" width="200" color="black">
    <!-- 头部：用户信息概览 -->
    <v-list-item
      class="px-4 py-2"
      prepend-avatar="https://randomuser.me/api/portraits/men/78.jpg"
      title="张小强"
      subtitle="zhangxiaoqiang@example.com"
    >
    </v-list-item>
    <v-divider></v-divider>

    <!-- 菜单项 -->
    <v-list-item
      prepend-icon="mdi-account-circle"
      title="我的资料"
      value="profile"
      to="/user/profile"
    >
    </v-list-item>

    <v-list-item
      prepend-icon="mdi-cog-outline"
      title="设置"
      value="notifications"
      to="/user/notifications"
    >
    </v-list-item>

    <v-divider></v-divider>

    <!-- 底部：注销 -->
    <v-list-item prepend-icon="mdi-logout" title="注销" value="logout" @click="handleLogoutClick">
    </v-list-item>
  </v-list>
  <!-- </v-menu> -->
</template>

<script lang="ts" setup>
const handleLogoutClick = () => {
  console.log("注销按钮被点击了 (实际操作需要JS)");
};
</script>
